<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="12" :lg="6" class="common-card-wrap">
      <CommonCard title="今日销售鹅" :value="12435124">
        <div>
          日同比 -19.16%
          <el-icon color="red"><CaretBottom /></el-icon>
        </div>
        <div>
          月同比 56.67%
          <el-icon color="green"><CaretTop /></el-icon>
        </div>
        <template #footer> 昨日销售鹅 ￥36000000 </template>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6" class="common-card-wrap">
      <CommonCard title="今日订单" :value="12435124">
        <LineChart />
        <template #footer> 昨日订单量 ￥36000000 </template>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6" class="common-card-wrap">
      <CommonCard title="今日交易用户数" :value="12435124">
        <BarChart />
        <template #footer> 退货率 5.91% </template>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6" class="common-card-wrap">
      <CommonCard title="累计用户数" :value="12435124">
        <ProgressChart />
        <template #footer>
          <span>
            日同比 -17.70%
            <el-icon color="green"><CaretTop /></el-icon>
          </span>
          <span>
            月同比 56.67%
            <el-icon color="red"><CaretBottom /></el-icon>
          </span>
        </template>
      </CommonCard>
    </el-col>
  </el-row>
</template>

<script lang="ts">
export default {
  name: "CHome",
};
</script>
<script lang="ts" setup>
import CommonCard from "./components/CommonCard.vue";
import LineChart from "./components/LineChart.vue";
import BarChart from "./components/BarChart.vue";
import ProgressChart from "./components/ProgressChart.vue";
import { CaretBottom, CaretTop } from "@element-plus/icons-vue";
</script>

<style scoped>
.common-card-wrap {
  margin-bottom: 10px;
}
</style>
